import React, {PureComponent} from 'react';
import {
  View,
  StyleSheet,
  Text,
  TextInput,
  Image,
  TouchableOpacity,
  TouchableWithoutFeedback,
  Keyboard,
  PermissionsAndroid,
  Platform,
  Button,
} from 'react-native';
import I18n from 'react-native-i18n';
import {connect} from 'react-redux';
import BaseComponent from '../base/BaseComponent';
import {
  ImageButton,
  LinearBoardButton,
  LinearButton,
  TextButton,
} from '../../components/Button';
import WalletUtils from '../../utils/wallet/WalletUtils';
import {LinerBoardTextInput} from '../../components/TextInput';
import {NormalHeader} from '../../components/NavigationHeader';
import {follow, getUserReward, getInviteList, query} from '../../api/user';
import {showToast} from '../../components/Toast';
import {updateUserInfo} from '../../redux/action';
import Clipboard from '@react-native-community/clipboard';
import {BASE_API} from '../../config';
import LinearGradient from 'react-native-linear-gradient';
import {ScrollView} from 'react-native-gesture-handler';
import ModalHandler from '../../components/ModalHandler';
var moment = require('moment');

class UserInvitesScreen extends BaseComponent {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      invites: [],
      page: 1,
      totalNum: 0,
      totalSignin: 0,
    };
  }

  componentDidMount() {
    this.getData(1);
  }

  reloadData = () => {
    this.setState({
      loading: false,
      success: false,
    });
    this.getData(1);
  };

  formatNum = (num) => {
    if (!num) return '0';
    return num;
  };

  calPageLength = (totalNum, size) => {
    return Math.floor(totalNum / size) + (totalNum % size == 0 ? 0 : 1);
  };

  getData = (page) => {
    let pageSize = 10;
    if (page < 1) {
      return;
    }
    if (page != 1 && this.calPageLength(this.state.totalNum, pageSize) < page) {
      return;
    }
    this.setState({
      page: page,
    });
    getInviteList({
      userToken: this.props.userInfo.token,
      size: pageSize,
      page: page,
    }).then((resp) => {
      console.log('getInviteList', JSON.stringify(resp));
      this.setState({
        invites: resp.data.rows,
        totalNum: resp.data.pageInfo.total,
        totalSignin: resp.data.totalSignin,
      });
    });
  };

  formatTime = (dt) => {
    return moment(dt).format('YYYY-MM-DD HH:mm');
  };

  renderComponent = () => {
    return (
      <View style={{flex: 1, backgroundColor: '#160231'}}>
        <NormalHeader
          navigation={this.props.navigation}
          text="Invite"
          left={{
            icon: require('../../assets/common/common_back_white.png'),
            onPress: () => {
              Keyboard.dismiss();
              this.props.navigation.goBack();
            },
          }}
        />

        <ScrollView>
          <View
            style={{
              paddingHorizontal: 20,
              alignItems: 'center',
            }}>
            <View
              style={{
                flexDirection: 'row',
                paddingHorizontal: 20,
                paddingVertical: 40,
              }}>
              <View
                style={{
                  flex: 1,
                  flexDirection: 'column',
                  alignItems: 'center',
                }}>
                <Text
                  style={{
                    color: '#fff',
                    fontSize: 25,
                    fontWeight: 'bold',
                  }}>
                  {this.formatNum(this.state.totalNum)}
                </Text>
                <Text
                  style={{
                    color: '#fff',
                    fontSize: 20,
                    marginTop: 12,
                    fontWeight: 'bold',
                  }}>
                  Invite Num
                </Text>
              </View>

              <View
                style={{
                  flex: 1,
                  flexDirection: 'column',
                  alignItems: 'center',
                }}>
                <Text
                  style={{
                    color: '#fff',
                    fontSize: 25,
                    fontWeight: 'bold',
                  }}>
                  {this.formatNum(this.state.totalSignin)}
                </Text>
                <Text
                  style={{
                    color: '#fff',
                    fontSize: 20,
                    marginTop: 12,
                    fontWeight: 'bold',
                  }}>
                  Signin Award
                </Text>
              </View>
            </View>

            <TouchableWithoutFeedback
              onPress={() => {
                this.props.navigation.push('InviteFriend');
              }}>
              <Image
                style={{
                  width: 375,
                  height: 110,
                  borderRadius: 10,
                }}
                source={require('../../assets/user/inviter_banner.png')}></Image>
            </TouchableWithoutFeedback>

            <View
              style={{
                margin: 40,
                backgroundColor: '#443559',
                padding: 16,
                width: '100%',
                borderRadius: 16,
              }}>
              <Text
                style={{
                  color: '#fff',
                  fontWeight: 'bold',
                  fontSize: 18,
                  marginBottom: 20,
                }}>
                Invite Record
              </Text>
              {this.state.invites.map((item, index) => {
                return (
                  <View key={index}>
                    <View
                      style={{
                        flexDirection: 'row',
                      }}>
                      <Text
                        style={{
                          color: '#D8D8D8',
                          fontSize: 14,
                        }}>
                        +{this.formatNum(item.amount)}
                      </Text>
                      <Text
                        style={{
                          color: '#D8D8D8',
                          fontSize: 14,
                          marginLeft: 10,
                          flex: 1,
                        }}>
                        {item.userNickName}
                      </Text>
                      <Text
                        style={{
                          color: '#D8D8D8',
                          fontSize: 14,
                        }}>
                        {this.formatTime(item.createTime)}
                      </Text>
                    </View>
                    <Image
                      style={{
                        width: '100%',
                        marginTop: 4,
                      }}
                      source={require('../../assets/user/divider.png')}></Image>
                  </View>
                );
              })}
              {this.state.totalNum > 0 ? (
                <View
                  style={{
                    flexDirection: 'row',
                    alignItems: 'center',
                    justifyContent: 'center',
                    marginTop: 10,
                  }}>
                  <ImageButton
                    btnStyle={{
                      width: 30,
                      height: 30,
                    }}
                    imageStyle={{
                      width: 15,
                      height: 15,
                    }}
                    source={require('../../assets/common/common_back_white.png')}
                    onPress={() => {
                      this.getData(this.state.page - 1);
                    }}></ImageButton>
                  <Text
                    style={{
                      marginHorizontal: 10,
                      color: '#fff',
                    }}>
                    {this.state.page}
                  </Text>
                  <ImageButton
                    btnStyle={{
                      width: 30,
                      height: 30,
                    }}
                    imageStyle={{
                      width: 15,
                      height: 15,
                    }}
                    source={require('../../assets/common/backwhite_icon.png')}
                    onPress={() => {
                      this.getData(this.state.page + 1);
                    }}></ImageButton>
                </View>
              ) : null}
            </View>
          </View>
          <View
            style={{
              width: '100%',
              height: this.props.widgetLayout.show
                ? this.props.widgetLayout.height
                : 0,
              marginTop: 10,
            }}></View>
        </ScrollView>
      </View>
    );
  };
}

const mapStateToProps = (state) => ({
  userInfo: state.User.userInfo,
  widgetLayout: state.Layout.widgetLayout,
});

const mapDispatchToProps = (dispatch) => ({});

export default connect(mapStateToProps, mapDispatchToProps)(UserInvitesScreen);
